<template>
    <div id="app">
        <!-- 上部图片 -->
        <div class="header-image">
            <img src="/开发资源1.jpg" alt="header-imag" style="width:100%">
        </div>

        <!-- 中间部分 -->
        <div class="center-container">
            <div class="scale-container">
                <el-container style="height: 700px; ">
                    <!--左导航栏-->
                    <el-aside width="200px" style="background-color: white; overflow: hidden;">
                        <el-menu :default-openeds="['1', '3']" router>
                            <el-submenu index="1">
                                <template slot="title"><i class="el-icon-aim"></i>终身学习平台</template>
                                <el-menu-item-group>
                                    <el-menu-item index="1-1">证书查询</el-menu-item>
                                    <el-menu-item index="1-2">考试相关</el-menu-item>
                                    <el-menu-item index="1-3">培训计划</el-menu-item>
                                    <el-menu-item index="1-4">学术分享</el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>

                            <el-submenu index="2">
                                <template slot="title">学籍中心</template>
                            </el-submenu>

                            <el-submenu index="4">
                                <template slot="title">留学中心</template>
                            </el-submenu>

                            <el-submenu index="5">
                                <template slot="title">扶贫平台</template>
                            </el-submenu>

                            <el-submenu index="6">
                                <template slot="title">跨校学校平台</template>
                            </el-submenu>

                            <el-submenu index="7">
                                <template slot="title">成绩查询</template>
                            </el-submenu>

                            <el-submenu index="8">
                                <template slot="title">学校平台</template>
                            </el-submenu>

                            <el-submenu index="9">
                                <template slot="title">大学平台</template>
                            </el-submenu>
                        </el-menu>
                    </el-aside>
                    <!-- 右侧内容 -->
                    <el-card class="box-card">
                        <div class="clearfix" style="display: flex; align-items: center;margin-top: -10px;">
                            <el-divider style="color: #409EFF; margin-right: 10px;" direction="vertical"></el-divider>
                            <p>证书编号查询插件</p>
                            <p style="margin-left: auto; padding: 3px 0;">支持语言:
                                <el-button style="padding: 3px 0;" type="text">other</el-button>
                            </p>
                        </div>
                        <el-divider class="blue-divider"></el-divider>

                        <div class="text-container">
                            <div class="line line-1">
                                <span style="font-weight: bold;margin-bottom: 10px;">示例</span>
                            </div>
                            <div class="line">
                                <span style="font-size: 12px;margin-top: 10px;margin-bottom: 10px;">能力开放平台IoT APP
                                    SDK Demo(Android)
                                    V1.3</span>
                                <a href="#" class="download-link" style="color:#409EFF;font-size: 10px;">下载</a>
                            </div>
                            <div class="line">
                                <span style="font-size: 12px;margin-top: 10px;margin-bottom: 10px;">能力开放平台IoT APP
                                    SDK(IOS) V1.3</span>
                                <a href="#" class="download-link" style="color:#409EFF;font-size: 10px;">下载</a>
                            </div>

                            <div class="line line-1">
                                <span style="font-weight: bold;margin-top: 20px;margin-bottom: 10px;">SDK</span>
                            </div>
                            <div class="line">
                                <span style="font-size: 12px;margin-top: 10px;margin-bottom: 10px;">能力开放平台IoT APP
                                    SDK Demo(Android)
                                    V1.3</span>
                                <a href="#" class="download-link" style="color:#409EFF;font-size: 10px;">下载</a>
                            </div>
                            <div class="line">
                                <span style="font-size: 12px;margin-top: 10px;margin-bottom: 10px;">能力开放平台IoT APP
                                    SDK(IOS) V1.3</span>
                                <a href="#" class="download-link" style="color:#409EFF;font-size: 10px;">下载</a>
                            </div>

                            <div class="line line-1">
                                <span style="font-weight: bold;margin-top: 20px;margin-bottom: 10px;">开发文档</span>
                            </div>
                            <div class="line">
                                <span style="font-size: 12px;margin-top: 10px;margin-bottom: 10px;">能力开放平台IoT APP
                                    SDK Demo(Android)
                                    V1.3</span>
                                <a href="#" class="download-link" style="color:#409EFF;font-size: 10px;">下载</a>
                            </div>
                            <div class="line">
                                <span style="font-size: 12px;margin-top: 10px;margin-bottom: 10px;">能力开放平台IoT APP
                                    SDK(IOS) V1.3</span>
                                <a href="#" class="download-link" style="color:#409EFF;font-size: 10px;">下载</a>
                            </div>
                        </div>
                    </el-card>
                </el-container>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {

        }
    },
    methods: {

    },
}
</script>

<style scoped>
#app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #F2F6FC;
}

.el-aside {
    color: #333;
}

.blue-divider {
    border-color: rgb(26, 113, 218);
    margin-top: -10px;
}

.header-image {
    display: flex;

}


.box-card {
    width: 700px;
    height: 700px;
}



.line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px dashed rgba(190, 180, 180, 0.556);
    /* 虚线分界线 */
}

.line-1 {
    margin-bottom: 10px;
}


.center-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    /* 视口高度，使容器占据整个屏幕高度 */
}
</style>